<template>
  <view class="well-info-container">
    <view class="well-info-wrap">
      <view class="well-header">
        <view class="well-name">井点信息（{{ wellInfo.pipNo }}）</view>
        <u-icon name="list-dot" color="#2979ff" size="28" @click="$emit('showWellList')"></u-icon>
      </view>
      <view class="well-geo">
        <view class="geo-item">经度：{{ wellInfo.longitude }}</view>
        <view class="geo-item">纬度：{{ wellInfo.latitude }}</view>
      </view>
      <view class="well-info-item" @click="handleRouteTo(4)">
        <view class="info-left">所属区域</view>
        <view class="info-right">
          <view class="info-label">{{ showWellInfo.areaId_dictText }}</view>
          <u-icon name="arrow-right" color="#E2E2E2" size="18"></u-icon>
        </view>
      </view>
      <view class="well-info-item" @click="handleRouteTo(5)">
        <view class="info-left">所属道路</view>
        <view class="info-right">
          <view class="info-label">{{ showWellInfo.street || '无' }}</view>
          <u-icon name="arrow-right" color="#E2E2E2" size="18"></u-icon>
        </view>
      </view>
      <view class="well-info-item" @click="handleShowMeasureDepthDailog">
        <view class="info-left">井深</view>
        <view class="info-right">
          <view class="info-label" v-if="showWellInfo.measureDepth"> {{ showWellInfo.measureDepth }}cm </view>
          <view class="info-label" v-else>无</view>
          <u-icon name="arrow-right" color="#E2E2E2" size="18"></u-icon>
        </view>
      </view>
      <u-divider class="divider-line"></u-divider>
    </view>
    <view class="eqp-list-wrap">
      <view v-if="total === 0" class="default-tip">暂无设备</view>
      <scroll-view v-else class="eqp-scroll-wrap" scroll-y="true">
        <view
          class="eqp-item"
          :class="{ 'active-eqp-item': index === activeIndex }"
          v-for="(item, index) in eqpList"
          :key="item.id"
          @click="handleSelectEquip(index)"
        >
          <view class="eqp-header">
            <view class="header-left">
              <text class="eqp-name">{{ item.equType | showEqpType(psEquTypeList) }}</text>
              <view class="online-status">
                <text v-if="item.onlintStatus === 1" class="un-active">未激活</text>
                <text v-if="item.onlintStatus === 2" class="online">在线</text>
                <text v-if="item.onlintStatus === 3" class="outline">离线</text>
              </view>
            </view>
            <view class="header-left">
              <view class="delate-eqp-btn" @click="handleEquSet(item, 2)">更换 </view>
              <view class="delate-eqp-btn" @click="handleEquSet(item, 3)">检测 </view>
              <view class="delate-eqp-btn" @click="handleDeleteEquip(item)">拆除 </view>
            </view>
          </view>
          <view class="eqp-info">
            <view class="info-item">设备名称：{{ item.equName }}</view>
            <view class="info-item">设备编号：{{ item.equNo }}</view>
            <view class="info-item"
              >补偿值：{{ item.compensate || '无' }}cm
              <text class="edit-btn" @click="handleShowSetCompensate(item)">修改</text></view
            >
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="btn-wrap">
      <!-- 新增设备 设备更换 设备检测-->
      <view class="btn-item" @click="handleRouteTo(1)">新增设备</view>
      <!-- <view class="btn-item" @click="handleRouteTo(2)">设备更换</view> -->
      <!-- <view class="btn-item" @click="handleRouteTo(3)">设备检测</view> -->
    </view>
    <u-modal
      :show="showCompensateDailog"
      title="修改补偿值"
      showCancelButton
      @cancel="showCompensateDailog = false"
      @confirm="handleConfirmCompensate"
    >
      <view class="slot-content">
        <u--input
          v-model="setEquip.compensate"
          type="number"
          placeholder="请输入补偿值"
          border="surround"
          maxlength="6"
          focus
          customStyle="border: 1rpx solid #ededed;width: 480rpx;height: 80rpx;background: #F3F3F3;border-radius: 8rpx;"
        ></u--input>
      </view>
    </u-modal>
    <u-modal
      :show="showMeasureDepthDailog"
      title="修改井深"
      showCancelButton
      @cancel="showMeasureDepthDailog = false"
      @confirm="handleConfirmMeasureDepth"
    >
      <view class="slot-content">
        <u--input
          v-model="measureDepth"
          type="number"
          placeholder="请输入井深"
          border="surround"
          maxlength="6"
          focus
          customStyle="border: 1rpx solid #ededed;width: 480rpx;height: 80rpx;background: #F3F3F3;border-radius: 8rpx;"
        ></u--input>
      </view>
    </u-modal>
  </view>
</template>
<script>
import { getEqpList } from '@/api/equipmentInstallation';
import { getDictItemInfo } from '@/api/system.js';
import { guanWangUpdate } from '@/api/guanwang.js';
import { equipPartInfoEdit, equipCompleteDelate, addEquipOperateLog } from '@/api/equip.js';
export default {
  props: {
    wellInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    showEqpType(type, psEquTypeList) {
      if (psEquTypeList.length) {
        const showItem = psEquTypeList.find((item) => +item.itemValue === type);
        return showItem?.itemText || '';
      } else {
        return '';
      }
    },
  },
  data: function () {
    return {
      showMeasureDepthDailog: false,
      showCompensateDailog: false,
      showWellInfo: {},
      pageNo: 1,
      pageSize: 20,
      total: null,
      finishFlag: false,
      eqpList: [],
      psEquTypeList: [], // 设备类型字典列表
      activeIndex: 0,
      setEquip: {
        id: '',
        compensate: '',
      },
      measureDepth: '',
    };
  },
  watch: {
    'wellInfo.pipNo': {
      handler: function (pipNo) {
        if (pipNo) {
          this.handleGetEquList();
          this.showWellInfo = {
            ...this.wellInfo,
          };
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.handleGetDictItemInfo('ps_equ_type');
  },
  methods: {
    async handleGetEquList() {
      try {
        const { data } = await getEqpList({
          ...this.getListParams(),
        });
        const eqpList = data?.result?.records || [];
        this.total = data?.result?.total || 0;
        this.eqpList = eqpList;
        const setEquitId = this.setEquip.id;
        if (eqpList.length && !eqpList.some((item) => item.id === setEquitId)) {
          this.activeIndex = 0;
          this.setEquip = eqpList[0];
          // console.log('eqpList[0]', eqpList[0]);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    async handleGetDictItemInfo(dictCode) {
      try {
        const { data } = await getDictItemInfo({
          dictCode,
        });
        this.psEquTypeList = data?.result || [];
      } catch (e) {
        //TODO handle the exception
      }
    },
    getListParams() {
      return {
        pipPointNo: this.wellInfo.pipNo,
        pageNo: 1,
        pageSize: 20,
      };
    },
    handleShowSetCompensate(equip) {
      this.setEquip.id = equip.id;
      this.setEquip.compensate = equip.compensate;
      this.showCompensateDailog = true;
    },
    async handleConfirmCompensate(val) {
      if (!this.setEquip.compensate) {
        uni.showToast({
          title: '请输入设备补偿值',
          icon: 'error',
        });
        return;
      }
      try {
        const setEquipId = this.setEquip.id;
        const newCompensate = this.setEquip.compensate;
        const param = {
          id: setEquipId,
          compensate: newCompensate,
        };
        await equipPartInfoEdit(param);
        this.handleGetEquList();
        this.showWellInfo = {
          ...this.showWellInfo,
          measureDepth: this.measureDepth,
        };
        this.showCompensateDailog = false;
      } catch (e) {
        //TODO handle the exception
      }
    },
    handleShowMeasureDepthDailog() {
      this.measureDepth = this.showWellInfo.measureDepth || '';
      this.showMeasureDepthDailog = true;
    },
    async handleConfirmMeasureDepth() {
      if (!this.measureDepth) {
        uni.showToast({
          title: '请输入进深',
          icon: 'error',
        });
        return;
      }
      try {
        const param = {
          isFormData: true,
          id: this.showWellInfo.id,
          measureDepth: this.measureDepth,
        };
        await guanWangUpdate(param);
        this.showWellInfo = {
          ...this.showWellInfo,
          measureDepth: this.measureDepth,
        };
        this.showMeasureDepthDailog = false;
      } catch (e) {
        //TODO handle the exception
      }
    },
    async handleDeleteEquip(equip) {
      try {
        const id = equip.id;
        const res = await uni.showModal({
          title: '提示',
          content: '确认拆除该设备？',
        });
        if (res[1].cancel) {
          return;
        }
        if (res[1].confirm) {
          await equipCompleteDelate({
            isFormData: true,
            id,
          });
          const { pipPointNo, equNo, equType, onlintStatus } = equip;
          const operationParams = {
            pointNo: pipPointNo,
            equNo,
            equType,
            status: onlintStatus,
            operateType: 2,
            operateSource: 2,
            operateTime: new Date().format('yyyy-MM-dd hh:mm:ss'),
          };
          await addEquipOperateLog(operationParams);
          this.handleGetEquList();
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    handleSelectEquip(i) {
      this.activeIndex = i;
      this.setEquip = {
        ...this.eqpList[i],
      };
    },
    handleEquSet(equip, type) {
      this.setEquip = { ...equip };
      this.handleRouteTo(type);
    },
    handleRouteTo(type) {
      if (type === 1) {
        // 跳转到新增设备
        uni.navigateTo({
          url: '/subpak_eqp_install/equipAdd/equipAdd',
          events: {
            refresh: () => {
              this.handleGetEquList();
            },
          },
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('sendWellInfo', this.showWellInfo);
          },
        });
        return;
      }
      if (type === 2) {
        // 跳转到设备更换
        if (!this.eqpList.length) {
          uni.showToast({
            icon: 'error',
            title: '暂无更换设备',
          });
          return;
        }
        uni.navigateTo({
          url: '/subpak_eqp_install/equipChange/equipChange',
          events: {
            refresh: () => {
              this.handleGetEquList();
            },
          },
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('sendEquipInfo', this.setEquip);
          },
        });
        return;
      }
      if (type === 3) {
        // 跳转到设备检测
        if (!this.eqpList.length) {
          uni.showToast({
            icon: 'error',
            title: '暂无检测设备',
          });
          return;
        }
        uni.navigateTo({
          url: '/subpak_eqp_install/equipDetail/equipDetail',
          events: {
            refresh: () => {
              this.handleGetEquList();
            },
          },
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('equipId', this.setEquip.id);
          },
        });
        return;
      }
      if (type === 4) {
        // 跳转到设置所属区域
        uni.navigateTo({
          url: '/subpak_eqp_install/equipSetArea/equipSetArea',
          events: {
            setWellInfo: (data) => {
              this.showWellInfo = {
                ...this.showWellInfo,
                ...data,
              };
            },
          },
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('sendWellInfo', this.showWellInfo);
          },
        });
        return;
      }
      if (type === 5) {
        // 跳转到设置所属街道
        uni.navigateTo({
          url: '/subpak_eqp_install/equipSetStreet/equipSetStreet',
          events: {
            setWellInfo: (data) => {
              this.showWellInfo = {
                ...this.showWellInfo,
                ...data,
              };
            },
          },
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('sendWellInfo', this.showWellInfo);
          },
        });
        return;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.well-info-container {
  height: 780rpx;
  margin: 16rpx 24rpx 0;
  background: #ffffff;
  box-shadow: 0 -4rpx 16rpx 0 #0000001a;
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
}

.well-info-wrap {
  padding: 24rpx 24rpx 0;
}
.well-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.well-name {
  height: 56rpx;
  line-height: 56rpx;
  font-weight: 500;
  font-size: 40rpx;
  color: #333333;
}

.well-geo {
  display: flex;
  justify-items: flex-start;
  align-items: center;
}

.geo-item {
  height: 37rpx;
  margin-right: 16rpx;
  font-size: 26rpx;
  color: #00000099;
}

.well-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.info-left {
  height: 42rpx;
  font-size: 30rpx;
  color: #00000099;
}

.info-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.info-label {
  height: 42rpx;
  margin-right: 8rpx;
  font-size: 30rpx;
  color: #000000e6;
}

.divider-line {
  margin-top: 24rpx;
}

.eqp-list-wrap {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.default-tip {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 274rpx;
  font-size: 36rpx;
  color: #00000066;
}

.eqp-scroll-wrap {
  flex: 1;
  height: 274rpx;
}

.eqp-item {
  padding: 24rpx;
  margin: 24rpx;
  border-radius: 24rpx;

  &.active-eqp-item {
    background: #f8f9fb;
  }
}

.eqp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.eqp-name {
  height: 50rpx;
  margin-right: 14rpx;
  line-height: 50rpx;
  font-weight: 500;
  font-size: 26rpx;
  color: #000000e6;
}

.online,
.un-active {
  padding: 2rpx 8rpx;
  background: #dae7ff;
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #3576f2;
}

.outline {
  padding: 2rpx 6rpx;
  background: #ffdada;
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #f23535;
}

.delate-eqp-btn {
  width: 108rpx;
  height: 48rpx;
  margin-left: 6rpx;
  line-height: 48rpx;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
  background: #3576f2;
  border-radius: 24rpx;
}

.info-item {
  padding-top: 8rpx;
  font-size: 30rpx;
  color: #00000099;
  font-weight: 400;
}

.edit-btn {
  margin-left: 16rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #3576f2;
}

.btn-wrap {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  height: 166rpx;
  width: calc(100% - 48rpx);
  padding: 16rpx 24rpx;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background: #ffffff;
  box-shadow: 0 -4px 24px 0 #00000014;
}

.btn-item {
  // width: 200rpx;
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #3576f2;
  border-radius: 8rpx;
  text-align: center;
  line-height: 80rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #3576f2;
}
</style>
